<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>HTML作业12-学习flex布局--启用flex，行布局和列布局</title>
<style type="text/css">
* {
	padding: 0;
	margin: 0;
}

.box1 {
	width: 400px;
	height: 400px;
	background-color: rgba(208,251,0,1.00);
	display: flex;
	flex-direction: row;
}
.box1 .item {
	background-color: rgba(242,9,13,1.00);
	width: 100px;
}
* {
	padding: 0;
	margin: 0;
}

.box2 {
	width: 400px;
	height: 400px;
	background-color: rgba(208,251,0,1.00);
	display: flex;
	flex-direction:column
}
.box2 .item {
	background-color: rgba(242,9,13,1.00);
	width: 100px;
}	
</style>
</head>

<body>
	<div class="box1">
	<div class="item">文本</div>
	<div class="item">文本</div>
	<div class="item">文本</div>
	</div>
	<br>
	<div class="box2">
	<div class="item">文本</div>
	<div class="item">文本</div>
	<div class="item">文本</div>
	</div>
</body>
</html>
